<template>
  <div class="app-container">
    <el-row style="margin-top: 10px;margin-left: 10px">
      <el-col :span="24" class="card-box">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="测试业务" prop="business">
            <el-select v-model="queryParams.business" placeholder="请选择测试业务" clearable @change="businessChage">
              <el-option
                v-for="evn in evn_list"
                :key="evn.id"
                :label="evn.env_name"
                :value="evn.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" v-if="queryParams.business!=''">所有业务
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>基本信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%">
              <tbody>
              <tr>
                <td class="el-table__cell is-leaf">
                  <div class="cell">总测试接口</div>
                </td>
                <td class="el-table__cell is-leaf">
                  <div class="cell" v-if="cache.allApis">{{ cache.allApis }}</div>
                </td>
                <td class="el-table__cell is-leaf">
                  <div class="cell">已经测试过的接口</div>
                </td>
                <td class="el-table__cell is-leaf">
                  <div class="cell" v-if="cache.testApis">{{ cache.testApis }}</div>
                </td>
                <td class="el-table__cell is-leaf">
                  <div class="cell">接口完成率</div>
                </td>
                <td class="el-table__cell is-leaf">
                  <div class="cell" v-if="cache.finshed">{{ cache.finshed }}%</div>
                </td>
                <td class="el-table__cell is-leaf">
                  <div class="cell">总测试次数</div>
                </td>
                <td class="el-table__cell is-leaf">
                  <div class="cell" v-if="cache.total">{{ cache.total }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span>接口完成率</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="usedmemory" style="height: 420px"/>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>测试结果统计</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commandstats" style="height: 420px"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { getCache } from "@/api/monitor/cache";
// import echarts from 'echarts'
import * as echarts from 'echarts'
import {getCount} from '@/views/dashboard/workbench/api'
// import { getCount } from '@/api/apiTest/result'
import * as evn_api from '@/views/api_envinfo/api'

export default {
  name: 'Server',
  data() {
    return {
      // 统计命令信息
      commandstats: null,
      // 使用内存
      usedmemory: null,
      // cache信息
      cache: [],
      queryParams: {
        env: ''
      },
      evn_list: []
    }
  },
  mounted() {
    this.initEnv()
    this.getList()
  },
  methods: {
    initEnv() {
      evn_api.GetList().then((ret) => {
        console.log(ret)
        this.evn_list = ret.data.data
        console.log(this.evn_list)
      })
    },
    resetQuery() {
      this.queryParams.business = ''
      this.getList()
    },
    businessChage(value) {
      console.log('value---------' + this.queryParams.business)
      this.getList()
    },
    /** 查缓存询信息 */
    getList() {
      getCount(this.queryParams.business).then((response) => {
        console.log(response)
        this.cache = response.data

        this.commandstats = echarts.init(this.$refs.commandstats, 'macarons')
        this.commandstats.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: ['检查成功', '检查失败', '跳过检查']
          },
          // 工具箱
          toolbox: {
            show: true,
            feature: {
              saveAsImage: {
                show: true
              }
            }
          },
          series: [
            {
              name: '测试详情',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: response.data.apicount,
              animationEasing: 'cubicInOut',
              animationDuration: 1000
            }
          ]
        })
        this.usedmemory = echarts.init(this.$refs.usedmemory, 'macarons')
        this.usedmemory.setOption({
          tooltip: {
            formatter: '{b} <br/>{a} : ' + response.data.finshed
          },
          series: [
            {
              name: '峰值',
              type: 'gauge',
              min: 0,
              max: 100,
              detail: {
                formatter: response.data.finshed
              },
              data: [
                {
                  value: parseFloat(response.data.finshed),
                  name: '完成率'
                }
              ]
            }
          ]
        })
      })
    }
  }
}
</script>
